<template>
  <view :style="themeColor()" v-if="memberStore.info">
      <view class="my-[24rpx] sidebar-marign px-[24rpx] rounded-[8rpx] bg-[#2F2F2F] text-[#fff]">
        <view class="py-[24rpx]">
          <view class="text-[30rpx] flex justify-between">
            <view>商品标题</view>
            <view class="text-right text-[24rpx] text-[#999]">{{ formData.name.length >= 200 ? 200 : formData.name.length }}/30</view>
          </view>
          <view class="py-[20rpx] mt-[20rpx]">
            <u-input fontSize="28rpx" v-model.trim="formData.name" border="none" clearable maxlength="25" :placeholder="'添加一个吸引人的标题吧～'"/>
          </view>
          <view class="py-[20rpx] mt-[20rpx] flex justify-between">
            <u-upload v-model="formData.images" :fileList="voucherListPreview" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="3"/>
            <view class="text-[24rpx] text-[#999]">{{ formData.images.length }}/3</view>
          </view>
        </view>
      </view>
<!--      <view class="sidebar-marign px-[24rpx] rounded-md bg-[#2F2F2F] text-[#fff]">
        <view class="py-[24rpx]">
          <view class="text-sm flex"><view class="text-red">*</view>上传商品图片(最多3张)</view>
          <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]">
            <u-upload v-model="formData.images" :fileList="voucherListPreview" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="5"/>
            <view class=" text-[24rpx] mt-[10rpx]">{{ formData.images.length }}/{{ 3 }}</view>
          </view>
        </view>
      </view>-->
    <view class="sidebar-marign px-[24rpx] rounded-[8rpx] bg-[#2F2F2F] text-[#fff]">
      <view class="py-[24rpx]">
        <view class="text-[30rpx] flex justify-between items-center">
          <view>价格</view>
          <view class="flex items-center text-[#B13F3F]">
            <text class="text-[26rpx] font-medium price-font">￥</text>
            <u-input fontSize="32rpx" v-model="formData.price" style="max-width: 100rpx" border="none" type="number" maxlength="5" placeholder="0.00"/>
            <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[#999]"></text>
          </view>
        </view>
        <view class="text-[30rpx] flex justify-between items-center mt-[20rpx]">
          <view>库存</view>
          <view class="flex items-center text-[#B13F3F]">
            <u-input fontSize="32rpx" v-model="formData.stock" style="max-width: 100rpx" border="none" type="number" maxlength="5" placeholder=""/>
            <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[#999]"></text>
          </view>
        </view>
<!--        <view class="text-sm flex"><view class="text-red">*</view>库存</view>
        <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]">
          <u-input  fontSize="28rpx" v-model="formData.stock" border="none" clearable  type="number" maxlength="3" :placeholder="'请在此处输入库存'" />
        </view>-->
      </view>
    </view>
<!--    <view class="sidebar-marign px-[24rpx] rounded-md bg-[#2F2F2F] text-[#fff]">
      <view class="py-[24rpx]">
        <view class="text-sm flex"><view class="text-red">*</view>价格</view>
        <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]">
          <u-input  fontSize="28rpx" v-model="formData.price" border="none" clearable  type="number" maxlength="5" :placeholder="'请在此处输入价格'" />
        </view>
      </view>
    </view>-->
      <view class="sidebar-marign mt-[24rpx] px-[24rpx] rounded-[8rpx] bg-[#2F2F2F] text-[#fff]">
        <view class="py-[24rpx]">
          <view class="text-[30rpx] flex justify-between">
            <view>商品详情
              <text class="text-[#999] text-[24rpx]">/非必填</text>
            </view>
            <view class="text-right text-[24rpx] text-[#999]">{{ formData.content.length >= 200 ? 200 : formData.content.length }}/200</view>
          </view>
          <view class="p-[20rpx] mt-[20rpx]">
            <textarea class="!text-[26rpx] mt-[20rpx] w-[100%]" v-model.trim="formData.content" placeholder="外观作用，真正的解锁内容在下面可输入商品详情等文案，文字默认展示在前面" maxlength="200" />
          </view>
          <view class="py-[20rpx] mt-[20rpx] flex justify-between">
            <u-upload v-model="formData.imagesDesc" :fileList="voucherListPreviewDesc" @afterRead="afterReadDesc" @delete="deletePicDesc" multiple :maxCount="5"/>
            <view class=" text-[24rpx] text-[#999]">{{ formData.imagesDesc.length }}/5</view>
          </view>
        </view>
      </view>
<!--      <view class="sidebar-marign px-[24rpx] rounded-md bg-[#2F2F2F] text-[#fff]">
        <view class="py-[24rpx]">
          <view class="text-sm flex"><view class="text-red">*</view>上传商品详情图片(最多5张)</view>
          <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]">
            <u-upload v-model="formData.imagesDesc" :fileList="voucherListPreviewDesc" @afterRead="afterReadDesc" @delete="deletePicDesc" multiple :maxCount="5"/>
            <view class=" text-[24rpx] mt-[10rpx]">{{ formData.imagesDesc.length }}/{{ 5 }}</view>
          </view>
        </view>
      </view>-->
      <view class="fixed bottom-0 w-[100%] bg-[#2f2f2f]">
        <button class="m-[20rpx] bg-[#B13F3F] text-[#fff] h-[80rpx] leading-[80rpx] text-[28rpx]" :loading="operateLoading" @click="save">发布</button>
      </view>

<!--    <tabbar />-->
    <!-- #ifdef MP-WEIXIN -->
    <!-- 小程序隐私协议 -->
    <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
//import { onLoad } from '@dcloudio/uni-app'
import {redirect, img, handleOnloadParams, deepClone} from '@/utils/common'
import { t } from '@/locale'
import { uploadImage } from '@/app/api/system'
import {useSubscribeMessage} from "@/hooks/useSubscribeMessage";
import useMemberStore from '@/stores/member'
import {myGoodsApply, myGoodsInfo} from "@/addon/ershou/api/esgoods";
import {onLoad} from "@dcloudio/uni-app";
const memberStore = useMemberStore()
const detail = ref(null)
const orderDetail = ref({})
const orderGoodsId = ref(0)
const step = ref(0)
const refundCausePopup = ref(false)
const formData = ref({
  es_goods_id: '',
  name: '',
  images: [],
  imagesDesc: [],
  content:'',
  stock:'',
  price:'',
})
const refundMoney = ref<any>({})
const reason = ref<string[]>([])
const currReasonName = ref('')


const voucherListPreview = computed(() => {
  return formData.value.images.map(item => {
    return {url: img(item)}
  })
})

const voucherListPreviewDesc = computed(() => {
  return formData.value.imagesDesc.map(item => {
    return {url: img(item)}
  })
})

const afterRead = (event) => {
  event.file.forEach(item => {
    uploadImage({
      filePath: item.url,
      name: 'file'
    }).then(res => {
      if (formData.value.images.length < 9 ) {
        formData.value.images.push(res.data.url)
      }
    })
  })
}

const afterReadDesc = (event) => {
  event.file.forEach(item => {
    uploadImage({
      filePath: item.url,
      name: 'file'
    }).then(res => {
      if (formData.value.imagesDesc.length < 9 ) {
        formData.value.imagesDesc.push(res.data.url)
      }
    })
  })
}

const deletePic = (event)=> {
  formData.value.images.splice(event.index, 1)
}

const deletePicDesc = (event)=> {
  formData.value.deletePicDesc.splice(event.index, 1)
}
onLoad((option) => {
  // #ifdef MP-WEIXIN
  // 处理小程序场景值参数
  option = handleOnloadParams(option);
  // #endif
  if(option.es_goods_id){
    myGoodsInfo({
      id: option.es_goods_id || '',
    }).then(res => {
      if (JSON.stringify(res.data) === '[]') {
        uni.showToast({ title: '找不到该商品', icon: 'none' })
        setTimeout(() => {
          redirect({ url: '/addon/ershou/pages/esgoods/my_goods_list', mode: 'reLaunch' })
        }, 600)
        return false
      }
      formData.value = deepClone(res.data);
    })
  }
})
const operateLoading = ref(false)
const formRef = ref(null)
const save = ()=> {
  if(!formData.value.name){
    uni.showToast({
      title: '请输入产品名称',
      icon: 'none'
    });
    return false;
  }
  if(formData.value.images.length < 1){
    uni.showToast({
      title: '请上传产品图片',
      icon: 'none'
    });
    return false;
  }
  if(formData.value.imagesDesc.length < 1){
    uni.showToast({
      title: '请上传详情图片',
      icon: 'none'
    });
    return false;
  }
  if(!formData.value.stock){
    uni.showToast({
      title: '请输入库存',
      icon: 'none'
    });
    return false;
  }
  if(!formData.value.price){
    uni.showToast({
      title: '请输入价格',
      icon: 'none'
    });
    return false;
  }
  if (operateLoading.value) return
  operateLoading.value = true

  myGoodsApply(formData.value).then((res) => {
    operateLoading.value = false
    setTimeout(()=> {
      redirect({ url: '/addon/ershou/pages/esgoods/my_goods_list', mode: 'redirectTo'})
    }, 1000)
  }).catch(() => {
    operateLoading.value = false
  })
}

</script>
<style lang="scss" scoped>
uni-page-body {
  background: #060606;
}
:deep(.u-upload__button) {
  width: 70px!important;
  height: 70px!important;
  border: 1px dashed #ddd;
}
:deep(.u-upload__wrap__preview__image) {
  width: 70px!important;
  height: 70px!important;
}
:deep(.uni-page-head) {
  background: #060606 !important;
  color: #fff !important;
}
:deep(.uni-page-head svg path) {
  fill: #fff !important;
}
:deep(.uni-input-input) {
  color: #999 !important;
}
:deep(.uni-input-placeholder) {
  color: #999 !important;
}
:deep(.u-upload__button){
  background-color: transparent !important;
}
:deep(.uni-textarea-placeholder) {
  line-height: 30rpx !important;
}
:deep(.uni-textarea-textarea) {
  line-height: 30rpx !important;
}
</style>
